'use client'
import React, { useState, useEffect } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import dayjs from 'dayjs'
import {
  Button,
  Col,
  Flex,
  Form,
  Input,
  Row,
  Select,
  Typography,
  DatePicker,
  Table,
  Alert,
  Modal,
  Divider
} from 'antd'
import { sellerVerifyList } from '../service/seller'
import SellerDetail from '../components/SellerDetail'
const { RangePicker } = DatePicker

export default function SellerList() {
  // 商家详情
  const [detail, setDetail] = useState({})
  // 模态框
  const [modalVisible, setModalVisible] = useState(false)
  // 保存选择的日期
  const [selectedDate, setSelectedDate] = useState(null)
  const [selectedDateString, setSelectedDateString] = useState(null)
  // 预设日期
  const rangePresets = [
    {
      label: '最近一周',
      value: [dayjs().add(-7, 'd'), dayjs()]
    },
    {
      label: '最近一个月',
      value: [dayjs().add(-30, 'd'), dayjs()]
    },
    {
      label: '最近三个月',
      value: [dayjs().add(-90, 'd'), dayjs()]
    }
  ]
  // 日期切换获取日期
  const onRangeChange = (dates, dateStrings) => {
    if (dates) {
      // console.log('From: ', dates[0], ', to: ', dates[1])
      // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      setSelectedDate(dates)
      setSelectedDateString(dateStrings)
      console.log(dateStrings)
    } else {
      setSelectedDate(null)
    }
  }
  // 重置日期
  const handleReset = () => {
    setSelectedDate(null)
  }
  const [sellerList, setSellerList] = useState([])
  const [total, setTotal] = useState(0)
  const [pageNo, setPageNo] = useState(1)
  const [condition, setCondition] = useState({})
  // 保存表格中选中的项
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  // 表格中是否有选中
  const hasSelected = selectedRowKeys.length > 0
  useEffect(() => {
    ;(async () => {
      // 查询商家
      const res = await sellerVerifyList({
        ...condition,
        pageNo: pageNo,
        businessStatus: 2
      })
      console.log(res)
      setSellerList(res.data.objects)
      setTotal(res.data.total)
    })()
  }, [])
  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={4}>信息管理</Typography.Title>
            {/* <Button type="primary" icon={<PlusOutlined />}>
              新增商家
            </Button> */}
          </Flex>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Form
            layout="inline"
            onFinish={async (values) => {
              if (selectedDate) {
                values.startingTime = selectedDateString[0] + ' 0:0:0'
                values.endTime = selectedDateString[1] + ' 23:59:59'
              }
              console.log(values)
              // 保存条件
              setCondition(values)
              const res = await sellerVerifyList(values)
              console.log(res)
              setTotal(res.data.total)
              setSellerList(res.data.objects)
            }}
          >
            <Form.Item label="商家名称：" name="businessName">
              <Input />
            </Form.Item>
            <Form.Item label="负责人联系方式：" name="businessHeadPhone">
              <Input type="phone" />
            </Form.Item>
            <Form.Item label="启用状态：" name="businessStatus">
              <Select
                placeholder="请选择状态"
                style={{ width: 120 }}
                options={[
                  { value: '', label: '所有' },
                  {
                    value: '1',
                    label: '启用'
                  },
                  {
                    value: '0',
                    label: '未启用'
                  }
                ]}
              />
            </Form.Item>
            <Form.Item label="申请日期">
              <RangePicker
                value={selectedDate}
                presets={rangePresets}
                onChange={onRangeChange}
              />
            </Form.Item>
            <Form.Item>
              <Button type="default" htmlType="reset" onClick={handleReset}>
                重置
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Typography.Paragraph style={{ fontSize: 16 }}>
            商家列表
          </Typography.Paragraph>
          {hasSelected && (
            <Alert
              message={`已经选择 ${selectedRowKeys.length} 项`}
              type="info"
              showIcon
            />
          )}
        </Col>
        <Col span={24}>
          <Table
            pagination={{
              total,
              defaultCurrent: 1,
              onChange: async (pageNo) => {
                const res = await sellerVerifyList({
                  ...condition,
                  pageNo,
                  businessStatus: 4
                })
                setSellerList(res.data.objects)
                setPageNo(pageNo)
              }
            }}
            rowKey="id"
            rowSelection={{
              selectedRowKeys,
              onChange: (newSelectedRowKeys) => {
                console.log('selectedRowKeys changed: ', newSelectedRowKeys)
                setSelectedRowKeys(newSelectedRowKeys)
              }
            }}
            dataSource={sellerList}
            columns={[
              {
                title: '编号',
                dataIndex: 'id',
                key: 'id'
              },
              {
                title: '商家名称',
                dataIndex: 'businessName',
                key: 'businessName'
              },
              {
                title: '商家地址',
                dataIndex: 'companyAddress',
                key: 'companyAddress'
              },
              {
                title: '负责人',
                dataIndex: 'businessHeadName',
                key: 'businessHeadName'
              },
              {
                title: '联系电话',
                dataIndex: 'businessHeadPhone',
                key: 'businessHeadPhone'
              },
              {
                title: '入驻时间',
                dataIndex: 'entryTime',
                key: 'entryTime'
              },
              {
                title: '操作',
                dataIndex: 'op',
                key: 'op',
                align: 'center',
                render: (_, record) => {
                  return (
                    <span className="op">
                      <a
                        onClick={() => {
                          setModalVisible(true)
                          setDetail(record)
                        }}
                      >
                        查看详情
                      </a>
                    </span>
                  )
                }
              }
            ]}
          />
        </Col>
      </Row>
      {/* 模态框 */}
      <Modal
        title="商家详情"
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        maskClosable={false}
        width={900}
        destroyOnClose
        footer={null}
      >
        <Divider />
        <SellerDetail detail={detail} />
      </Modal>
    </>
  )
}
